<template>
  <view class="background">
    <view class="first-container">
      <view>课程名</view>
      <input  v-model="courseForm.courseName" type="text" placeholder="请输入">
      <view>任课教师</view>
      <select v-model="courseForm.teacherId" style="width: 94%;height: 40px;border-radius: 5px;border: 1px solid #cccccc">
        <option value="" disabled selected>请选择任课教师</option>
        <view v-for="(item, index) in teacherData" :key="index">
          <option :value="item.id">{{ item.teacherName }}</option>
        </view>
      </select>
      <!-- 开始周和结束周选择器 -->
      <view class="week-pickers">
        <view class="week-picker">
          <view>开始周</view>
          <picker @change="bindStartWeekChange" :value="courseForm.startWeek" :range="weekRange">
            <view class="picker">{{ courseForm.startWeek }}</view>
          </picker>
        </view>
        <view class="week-picker">
          <view>结束周</view>
          <picker @change="bindEndWeekChange" :value="courseForm.endWeek" :range="weekRange">
            <view class="picker">{{ courseForm.endWeek }}</view>
          </picker>
        </view>
      </view>
      <view >课程描述</view>
      <textarea class="input" type="text" v-model="courseForm.description" placeholder="请输入"/>
      <view>学分</view>
      <input v-model="courseForm.studyScore" type="text" placeholder="请输入">
      <view>容量</view>
      <input v-model="courseForm.remain" type="text" placeholder="请输入">



    <view style="display: flex;margin-top: 60rpx;">
      <button class="button" @click="addCourse">确认</button>
    </view>
  </view>
</view>
</template>

<script>
import admin from "../../api/admin";

export default {
  data() {
    return {
      teacherData:[],
      courseForm: {
        courseName: '',
        description: '',
        teacherId: '',
        studyScore: '',
        startWeek: 1,
        endWeek: 1,
        remain: ''
      },
      weekRange: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]
    }
  },
  onLoad() {
    this.teachersList()
  },
  methods: {
    bindStartWeekChange(e) {
      this.courseForm.startWeek = e.detail.value + 1;
    },
    bindEndWeekChange(e) {
      this.courseForm.endWeek = e.detail.value + 1;
    },
    //获取教师列表
    async teachersList() {
      try {
        const res = await admin.teacherList()
        this.teacherData = res.data
        console.log('111', res.data)
      } catch (e) {
        return Promise.reject(e)
      }
    },
    //新增课程
    async addCourse() {
      try {

        uni.showModal({
          content: '确认新增该课程？',
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          success: (res) => {
            if (res.confirm) {
              admin.addCourse(this.courseForm)
              this.showToast('新增课程成功!');
              this.clearForm();
              setTimeout(() => {
                uni.navigateTo({
                  url: '/pages/courseManage/currentCourse', // 跳转的目标页面路径
                });
              },1000)

            } else {
              console.log('用户点击了取消');
            }
          }
        });
      } catch (e) {
        return Promise.reject(e)
      }
    },
    showToast(message) {
      uni.showToast({
        title: message,
        icon: 'success',
        duration: 2000
      });
    },
    clearForm() {
      this.courseForm= {
        courseName: '',
        description: '',
        teacherId: '',
        studyScore: '',
        startWeek: '',
        endWeek:'',
        remain: ''
      }
    }
  }
}
</script>

<style >
.background {
  height: 100vh; /* 使背景占满整个视口高度 */
  width: 100%;
  background: white;
  flex-direction: column; /* 使子元素垂直排列 */
  display: flex;
  align-items: center; /* 垂直居中 */

}

.first-container {
  width: 90%;
  height: 90%;
  border-radius: 10px;
  padding: 20px;
  display: flex;
  flex-direction: column; /* 垂直排列子元素 */
  gap: 10px; /* 设置子元素之间的间距 */
  margin-top: 10px;
}

.first-container > view {
  font-weight: bold;
  font-size: 14px;
}

.first-container > input {
  width: 90%; /* 输入框宽度占满容器 */
  height: 40px; /* 输入框高度 */
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 0 10px; /* 内边距 */
  font-size: 14px;
}

.button {
  border: 0;
  background-color: #409EFF;
  color: white;
  width: 180rpx;
  font-size: 14px;
  margin-top: -30px;
}

.input {
  display: block;
  border-radius: 5px;
  width: 92%;
  padding: 5px;
  border: 1px solid #ccc;
  height: 15%;
}

.picker {
  width: 75%;
  border: 1px solid #cccccc;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  height: 30px;
}

/* 新增样式 */
.week-pickers {
  display: flex;
  justify-content: space-between;
  gap: 10px; /* 两个选择器之间的间距 */
}

.week-picker {
  width: 40%; /* 使每个选择器占据一半的宽度 */
}
</style>